<%--
  Created by IntelliJ IDEA.
  User: lb
  Date: 16-1-12
  Time: 下午2:24
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>设备配套</title>
</head>
<body>
<div id="bsaeMain">
    <ul class="nav nav-tabs" role="tablist">
        <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab"
                                                  data-toggle="tab">设施管理</a></li>
        <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">配套管理</a></li>
    </ul>

    <!-- Tab panes -->
    <div class="tab-content">
        <div role="tabpanel" class="tab-pane active" id="home">
            <div class="col-lg-6">
                <div class="input-group">
                    <input type="text" class="form-control" v-model="EQUIPMENT.name" placeholder="设施名称">
                    <input type="hidden" v-model="EQUIPMENT.type" value="EQUIPMENT">
                    <span class="input-group-btn">
                        <button class="btn btn-default" type="button" v-on:click="addData(EQUIPMENT)">添加</button>
                    </span>
                </div>
                <!-- /input-group -->
            </div>
            <!-- /.col-lg-6 -->
            <table class="table">
                <thead>
                <tr>
                    <th>设施名称</th>
                    <th>创建时间</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody>
                <tr v-for="i in item.EQUIPMENT | filterBy EQUIPMENT.name in 'name'">
                    <td>
                        <span v-bind:class="{'show':isShow,'hidden':isHidden}">{{i.name}}</span>
                        <input type="text" v-model="i.name" v-bind:class="{'show':isHidden,'hidden':isShow}"
                               value="{{i.name}}">
                    </td>
                    <td>{{i.createDate}}</td>
                    <td>
                        <button class="btn" v-on:click="upData(i)">{{isShow ? "修改" : "确定"}}</button>
                        <button class="btn" v-on:click="delData(i)">删除</button>
                    </td>
                </tr>
                </tbody>
            </table>
        </div>
        <div role="tabpanel" class="tab-pane" id="profile">
            <div class="col-lg-6">
                <div class="input-group">
                    <input type="text" class="form-control" v-model="SUPPORTING.name" placeholder="设施名称">
                    <input type="hidden" v-model="SUPPORTING.type" value="SUPPORTING">
                    <span class="input-group-btn">
                        <button class="btn btn-default" type="button" v-on:click="addData(SUPPORTING)">添加</button>
                    </span>
                </div>
                <!-- /input-group -->
            </div>
            <!-- /.col-lg-6 -->
            <table class="table">
                <thead>
                <tr>
                    <th>设施名称</th>
                    <th>创建时间</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody>
                <tr v-for="i in item.SUPPORTING | filterBy SUPPORTING.name in 'name' ">
                    <td>
                        <span v-bind:class="{'show':isShow,'hidden':isHidden}">{{i.name}}</span>
                        <input type="text" v-model="i.name" v-bind:class="{'show':isHidden,'hidden':isShow}"
                               value="{{i.name}}">
                    </td>
                    <td>{{i.createDate}}</td>
                    <td>
                        <button class="btn" v-on:click="upData(i)">{{isShow ? "修改" : "确定"}}</button>
                        <button class="btn" v-on:click="delData(i)">删除</button>
                    </td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>
<script>
    var Vue = new Vue({
        el: "#bsaeMain",
        data: {
            name: "",
            supporting: "",
            isShow: true,
            isHidden: false
        },
        methods: {
            upData: function (key) {
                var $this = this;
                if (!this.isShow) {
                    $.ajax({
                        url: "/equipemntsupporting/updata",
                        type: "post",
                        data: {guid: key.guid, name: key.name},
                        success: function (data) {
                            if (data) {
                                $this.isShow = true;
                                $this.isHidden = false;
                            }
                        }
                    })
                } else {
                    this.isShow = false;
                    this.isHidden = true;
                }
            },
            delData: function (key) {
                var $this = this;
                $.ajax({
                    url: "/equipemntsupporting/delete/" + key.guid,
                    success: function (data) {
                        $this.item[key.type].$remove(key);
                    }
                })
            },
            addData: function (key) {
                var $this = this;
                $.ajax({
                    url: "/equipemntsupporting/add",
                    type: "post",
                    data: {name: key.name, type: key.type},
                    success: function (data) {
                        if (data) {
                            $this.item[key.type].push(data)
                            $this[key.type] = "";
                        }
                    }
                })
            }
        }
    })
    $.ajax({
        url: "/equipemntsupporting/listdata",
        success: function (data) {
            Vue.$set("item", data)
        }
    })
</script>
</body>
</html>